// 子组件
<template>
  <div class="editor">
    <div ref="toolbar" class="toolbar"></div>
    <div ref="editor" class="text"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import request from '@/utils/request'
export default {
  name: 'editoritem',
  data() {
    return {
      editor: null,
      info_: null,
      baseURL: request.defaults.baseURL, // 请求根路径
      imgUrl: '',
    }
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear()
        this.info_ = null
      }
    },
  },
  mounted() {
    this.seteditor()
    this.editor.txt.html(this.value)

  },
  methods: {
   // 富文本图片存在回显失败问题，建议自己在合适的区域由父组件代替触发
   updateText(){
      const dom = document.querySelector('.w-e-text')
      dom.innerHTML=this.value
    },
  // 富文本图片存在清除失败问题，建议自己在合适的区域由父组件代替触发
    clearText(){
      const dom = document.querySelector('.w-e-text')
      dom.innerHTML='<p><br></p>'
    },
    seteditor() {
      // http://192.168.2.125:8080/admin/storage/create
      this.editor = new E(this.$refs.toolbar, this.$refs.editor)
      // this.editor.config.uploadImgShowBase64 = false // base 64 存储图片
      // this.editor.config.showLinkImg = false // 是否支持超链接图片   此时特别注意：showLinkImg属性与uploadImgServer属性不能同时存在，官方文档有说明
      this.editor.config.uploadImgServer ='//file.xxxx.com/upload' // 配置服务器端地址  此处请自行填写
      this.editor.config.uploadImgParamsWithUrl = true
      this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
      this.editor.config.debug = true // 开启debug模式
      this.editor.config.withCredentials = true
      // this.editor.config.uploadImgHeaders = {
      //   token: this.$store.state.user.token, // 设置请求头
      // }
      this.editor.config.uploadImgMaxSize = 3 * 1024 * 1024 // 将图片大小限制为 2M
      this.editor.config.uploadImgMaxLength = 3 // 限制一次最多上传 3 张图片
      this.editor.config.uploadImgTimeout = 3000 // 设置超时时间
      this.editor.config.uploadImgHooks = {
        before: function (xhr, editor, file) {
          let formData = new FormData()
          formData.append('file', file[0])
          request({
            method: 'post',
            data: formData,
            url: '/cmpp-manage/marketFileUpload/upload',
          })
            .then((res) => {
        console.log(res);
              if (res.code) {
                this.imgUrl = res.data
              }
            })
            .catch((err) => {
              console.log('err: ', err)
            })
        },

        customInsert: function (insertImgFn, result) {
          setTimeout(() => {
            console.log('图片链接: ', this.imgUrl)
            insertImgFn(this.imgUrl)
          }, 1000)
          //customInsert是异步函数，一开始没有获取到this.imgUrl
          // result 即服务端返回的接口
          // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          // insertImgFn(process.env.VUE_APP_PICTURE + result.data)
          // insertImgFn(this.imgUrl)
        },
      }

      // 配置菜单
      this.editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        // 'image', // 插入图片
        'table', // 表格
        'video', // 插入视频
        'code', // 插入代码
        'undo', // 撤销
        'redo', // 重复
        'fullscreen', // 全屏
      ]
      // // wangeditor富文本编辑器插入网络图片的回调事件
      // this.editor.config.linkImgCallback = function (src, alt, href) {
      //    // 由于获取的所有img标签会形成为 NodeList [img] 存储 此处使用Array.prototype.slice.call方法将其转换为数组
      //   dom = Array.prototype.slice.call( document.querySelector(".w-e-text").querySelectorAll("img"));
      //   // 判断dom元素是否存在，防止报错
      //   if (dom) {
      //     try {
      //       // 对dom数组进行循环
      //       dom.map((x, index) => {
      //         // dom[index]此时是一个数组，根据索引找到对应图片属性对象，里面有很多关于这img标签的属性，outerHTML为其中img标签
      //         if ((x = dom[index].outerHTML)) {
      //           // 此处直接改变对图片属性里的img标签进行改变
      //           // 由于wangeditor富文本编辑器会对跳转链接进行编码，此处用decodeURIComponent进行解码
      //           // dom[index].dataset.href 为编码后的跳转链接   
      //           dom[index].outerHTML = `<a href=${decodeURIComponent(dom[index].dataset.href)}>${dom[index].outerHTML}</a>`;
      //         }
      //       });
      //     } catch (e) {
      //       console.log(e);
      //       return e;
      //     }
      //   }
      // };
      this.editor.config.onchange = (text) => {
        this.info_ = text.trim() // 绑定当前逐渐地值
        this.$emit('change', this.info_) // 将内容同步到父组件中
      }

      // 创建富文本编辑器
      this.editor.create()
    },
  },
}
</script>

<style lang="css">
.editor {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
.toolbar {
  border: 1px solid #ccc;
  flex-wrap: wrap;
}
.text {
  border: 1px solid #ccc;
  min-height: 500px;
}
.w-e-text p {
  margin: 0;
  height: 30px;
}
</style>